import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,Accordion,List,SearchBar,TabBar, PullToRefresh, ListView} from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull,handleOSS } from "../../utils/helper";
import { Row, Col } from 'antd';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { Menu } from 'antd';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import MToast from '../../components/Util/MToast';
const { SubMenu } = Menu;
@connect(() => {
  return ({

  })
})
export default class Category extends PureComponent{

  constructor(props){
    super(props);
    this.state = {
      categoryItem:[],
      categoryChild:[],
      openKeys: [],
      rootSubmenuKeys:[],
      defaultSelectedKeys:[],
      code:'',
      goodsItem:[],
      loading:true,
      loading1:true,
      isDown:false,
      selectedTab: 'blueTab',
      isButton:false,
      isOpen:false
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    var arr=[];
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=category_list_show",
          params: [
          ],
          _c: "category_list_show"
        },
        callback: (result) => {
          let { data } = result;
        console.log(data)

          this.setState({
            categoryItem:data,

            loading:false
          })


        }
      }
    });

  }
  handleCategory=(e,i)=>{
    let {dispatch} = this.props;
    goToPage({ dispatch, config: { url: "/category_page?code="+i.parent_id+"&name="+i.name}, isReplace: false })
  }
  sidebarMenu(){
    let {categoryItem,code,defaultSelectedKeys} = this.state;
    if (!categoryItem || categoryItem.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T(localeData[localStorage.locale].goodsDetailCartNoGood)}
        </div>
      )
    }
    else{
      return(
      <Row >
        {categoryItem.map((i,k)=>(
          <Col  span={6} key={i.code} onClick={(e)=>{this.handleCategory(e,i)}} style={{padding:'10px 10px 16px'}}>
            <img src={handleOSS(i.img_url)} style={{width:'73px',height:'73px'}}/>
            <p  className="ellipsis4" style={{color:'#303133',marginTop:'10px',}}>{i.name}</p>
          </Col>
        ))}

      </Row>

      )
    }
  }
  render(){
    let {dispatch} = this.props;
    let {cartItems,loading,modal2,currentQuantity,modal3,currentItem_id,categoryItem,categoryChildItem,defaultSelectedKeys,isOpen} = this.state;
    const messages = localeData[localStorage.locale];
    if (loading) {
      return (
        <div className="normal">
          <ActivityIndicator toast text="正在加载" animating={true} />
        </div>
      )
    }
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
      <div style={{height:"100%",width:'100%',padding:'10px 0',background:"#fff"}}>
        <div maxLength={8} style={{position:'fixed',top:'2%',left:'10%',width:'80%',zIndex:'100',height:'42px',border:'1px solid #ddd',borderRadius:'20px',background:"#fff",lineHeight:'42px'}} onClick={()=>{goToPage({ dispatch, config: { url: "/searchPage" }, isReplace: false })}}>
          <div style={{position:'absolute',top:'0%',left:'5%'}}>
            <img src="image/search_24px.png" style={{width:'24px',height:'24px'}}/><span style={{color:'#C9C9C9',fontSize:'13px'}}>{messages.searchPlaceholder}</span>
          </div>
        </div>

        <div style={{overflowY:'auto',paddingTop:'15%',height:"93%"}}>
              {this.sidebarMenu()}
        </div>
        <div style={{position:'fixed',bottom:'0px',left:'0px',width:'100%'}}> <TabBar
          unselectedTintColor="#949494"
          tintColor="#F09600"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title={messages.home}
            key="Life"
            icon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home2.png) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home3.png) center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab',
              });
              goToPage({ dispatch, config: { url: "/shop_home" }, isReplace: false })
            }}
            data-seed="logId"
          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category.png) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category1.png) center center /  21px 21px no-repeat' }}
              />
            }
            title={messages.category}
            key="Koubei"

            selected={this.state.selectedTab === 'blueTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab',
              });
              goToPage({ dispatch, config: { url: "/category" }, isReplace: false })
            }}
            data-seed="logId1"
          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart4.png) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart5.png) center center /  21px 21px no-repeat' }}
              />
            }
            title={messages.cart}
            key="Friend"
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'greenTab',
              });
              goToPage({ dispatch, config: { url: "/goodcart" }, isReplace: false });
              localStorage.setItem("cart",'0')
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: 'image/my.png' }}
            selectedIcon={{ uri: 'image/my1.png' }}
            title={messages.my}
            key="my"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'yellowTab',
              });
              goToPage({ dispatch, config: { url: "/my" }, isReplace: false })
            }}
          >
          </TabBar.Item>
        </TabBar></div>
      </div>
      </IntlProvider>
    )
  }
}
